<template>
  <div class="home-view-container">
    <div class="element"></div>
    <div class="chat-box">
      <div v-for="(item, index) in msgList" :key="item">
        <div v-if="index % 2 === 1">
          <div v-show="loading"><img :src="loadingImg" class="loading-img" /> 正在回答</div>
          <div class="typing-text" id="typing-text">{{ item.content }}</div>
        </div>
        <div v-else class="right-content" >
          <div class="right-content-msg-box">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="input-box">
      <input v-model="inputValue" type="textarea" class="input" placeholder="请输入" @keydown.enter="keyDown" />
      <div class="send-btn" @click="onSend">发送</div>
    </div>
    <div class="test-btn" @click="getStreamingData">模拟新数据</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import { generateUuid, getRandomStr } from '@/utils/util'
import loadingImg from '@/assets/loading.svg'

const inputValue = ref()
const msgList = ref([])//消息类型chatType: 1文字 ，发送者身份identity：1自己 2别人，消息内容content: ''
const loading = ref(false)

// 发送
const onSend = () => {
  if(!inputValue.value) return
  msgList.value.push({
    chatType: 1,
    identity: 1,
    content: inputValue.value,
    id: generateUuid()
  })

  inputValue.value = ''
  loading.value = true

  setTimeout(()=>{
    mockGetData()
  },1000)
}

const keyDown = (e) => {
  if (e.keyCode === 13 || e.keyCode === 100) {
    onSend();
  }
}

// 模拟收到响应
const mockGetData = () => {
  msgList.value.push({
    chatType: 1,
    identity: 2,
    content: '',
    id: generateUuid()
  })
  setTimeout(()=>{
    getStreamingData()
  },1000)
}

// 模拟收到流式数据回复
const getStreamingData = () => {
  const id = msgList?.value?.[1]?.id//假设是这条数据的回复
  msgList?.value?.forEach((item)=>{
    if(id === item?.id){
      // 拼接数据,改变文本内容
      item.content += getRandomStr()
    }
  })
  loading.value = false
}

</script>

<style scoped lang="scss">
.home-view-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  width: 800px;
  margin: 0 auto;
  .chat-box{
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    width: 100%;
    height: 600px;
    overflow-y: scroll;
    padding: 10px;
  }
  .input-box{
    border-radius: 20px;
    border: 1px solid #cccccc;
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .input{
      width: 100%;
      height: 50px;
      padding: 5px;
      border: none;
      &:focus {
            outline: none;
      }
    }
    .send-btn{
      color: #ffffff;
      background: pink;
      border-radius: 8px;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0 6px;
      margin-left: 10px;
    }
  }
  .right-content{
    display: flex;
    justify-content: flex-end;
    &-msg-box{
      background: #0000000A;
      border-radius: 10px;
      color: #000000D9;
      padding: 10px;
    }
  }
  .test-btn{
    margin-top: 20px;
    background: yellow;
    cursor: pointer;
  }
  .loading-img{
    width: 12px;
    height: 12px;
    animation-name: example;
    animation-duration: 2s;
  }
  // 定义加载动画
  @keyframes example {
    0%   {transform: rotate(0deg);}
    50%  {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
  }

    /* 定义光标闪烁动画 */
    @keyframes blink-caret {
      from,
      to {
        border-color: transparent;
      }
      50% {
        border-color: black;
      }
    }

}
</style>
